<style>
  .pagination {
    justify-content: center;
  }

  .img {
    display: flex;
    justify-content: space-around;
  }

  .img img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
  }
</style>
<!--页面主要内容-->
<main class="lyear-layout-content">
  <div class="container-fluid p-t-15">
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-toolbar d-flex flex-column flex-md-row">
            <div class="toolbar-btn-action">
              <a class="btn btn-danger dels"><i class="mdi mdi-window-close"></i> 删除</a>
            </div>
            <form class="search-bar ml-md-auto" method="get" role="form">
              <input type="hidden" name="search_field" id="search-field" value="name" />
              <div class="input-group ml-md-auto">
                <div class="input-group-prepend">
                  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" id="search-btn">预约项目</button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="javascript:void(0);" data-field="name">预约项目</a>
                    <a class="dropdown-item" href="javascript:void(0);" data-field="user.nickname">预约用户</a>
                    <a class="dropdown-item" href="javascript:void(0);" data-field="address.mobile">手机号</a>
                  </div>
                </div>
                <input type="text" class="form-control" name="keyword" placeholder="请输入关键字" value="">
              </div>
            </form>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="check-all">
                        <label class="custom-control-label" for="check-all"></label>
                      </div>
                    </th>
                    <th>编号</th>
                    <th>预约用户</th>
                    <th>手机号</th>
                    <th>上门地址</th>
                    <th>预约项目</th>
                    <th>服务备注</th>
                    <th>星级评分</th>
                    <th>服务价格</th>
                    <th>状态</th>
                    <th>预约时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {foreach $OrderList as $key => $item}
                  <tr>
                    <td>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input ids" name="ids[]" value="{$item['id']}"
                          id="ids-{$item['id']}">
                        <label class="custom-control-label" for="ids-{$item['id']}"></label>
                      </div>
                    </td>
                    <td>{$key + ($page - 1) * $num + 1}</td>
                    <td>{$item['user']['nickname']}</td>
                    <td>{$item['address']['mobile']}</td>
                    <td>{$item['address']['region_text'].' '.$item['address']['address']}</td>
                    <td>{$item['project']['name']}</td>
                    <td>{$item['content']}</td>
                    <td>{$item['rate']?$item['rate'].'星':'未评价'}</td>
                    <td>{$item['price']}</td>
                    <td>{$item['status_text']}</td>
                    <td>{$item['createtime']}</td>
                    <td>
                      <div class="btn-group">
                        <a class="btn btn-xs btn-primary"
                          href="{:url('/admin/projectorder/info',['orderid' => $item['id']])}" title=""
                          data-toggle="tooltip" data-original-title="查看预约进度">
                          <i class="mdi mdi-file-eye"></i>
                        </a>
                        <a class="btn btn-xs btn-danger del" data-toggle="tooltip" data-orderid="{$item['id']}"
                          data-original-title="删除"><i class="mdi mdi-window-close"></i>
                        </a>
                        {if $item['status']==-2}
                        <a class="btn btn-xs btn-success" data-toggle="tooltip" data-orderid="{$item['id']}"
                          data-original-title="通过"><i class="mdi mdi-check"></i>
                        </a>
                        <a class="btn btn-xs btn-warning" data-toggle="tooltip" data-orderid="{$item['id']}"
                          data-original-title="不通过"><i class="mdi mdi-block-helper"></i>
                        </a>
                        {/if}
                      </div>
                    </td>
                  </tr>
                  {/foreach}
                </tbody>
              </table>
            </div>
            <!-- 分页 -->
            {$OrderList|raw}
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
<!--End 页面主要内容-->

<script>
  $('.search-bar .dropdown-menu a').click(function () {
    var field = $(this).data('field') || '';
    $('#search-field').val(field);
    $('#search-btn').html($(this).text());
  });
  function GetID() {
    var IdArr = []
    $('input[name="ids[]"]:checked').each(function (index, item) {
      IdArr.push(item.value)
    })
    return IdArr
  }
  // 审核通过
  $('.btn-success').click(function (){
    $.confirm({
      title: '审核',
      content: '确认审核通过？',
      buttons: {
        confirm: {
          text: '确认',
          btnClass: 'btn-info',
          action: () => {
            var orderid = $(this).data('orderid')
            $.ajax({
              type: "post",
              url: `{:url('admin/projectorder/status')}`,
              data: {
                action: 'adopt',
                orderid
              },
              dataType: "json",
              success: function (res) {
                if (res.code === 1) {
                  $.notify({
                    message: res.msg
                  }, {
                    delay: 1000,
                    type: 'success',
                    onClose: function () {
                      location.reload()
                    }
                  })
                } else {
                  $.notify({
                    message: res.msg,
                  }, {
                    delay: 1000,
                    type: 'warning'
                  })
                }
              }
            })
          }
        },
        cancel: {
          text: '取消',
          btnClass: 'btn-danger'
        }
      }
    })
  })
  // 不通过
  $('.btn-warning').click(function (){
    $.confirm({
      title: '审核',
      content: '确认拒绝撤销？',
      buttons: {
        confirm: {
          text: '确认',
          btnClass: 'btn-info',
          action: () => {
            var orderid = $(this).data('orderid')
            $.ajax({
              type: "post",
              url: `{:url('admin/projectorder/status')}`,
              data: {
                orderid
              },
              dataType: "json",
              success: function (res) {
                if (res.code === 1) {
                  $.notify({
                    message: res.msg
                  }, {
                    delay: 1000,
                    type: 'success',
                    onClose: function () {
                      location.reload()
                    }
                  })
                } else {
                  $.notify({
                    message: res.msg,
                  }, {
                    delay: 1000,
                    type: 'warning'
                  })
                }
              }
            })
          }
        },
        cancel: {
          text: '取消',
          btnClass: 'btn-danger'
        }
      }
    })
  })
  // 单条删除
  $('.del').click(function () {
    $.confirm({
      title: '删除',
      content: '确认删除预约订单？',
      buttons: {
        confirm: {
          text: '确认',
          btnClass: 'btn-info',
          action: () => {
            var orderid = $(this).data('orderid')
            $.ajax({
              type: "post",
              url: `{:url('admin/projectorder/del')}`,
              data: {
                action: 'del',
                orderid
              },
              dataType: "json",
              success: function (res) {
                if (res.code === 1) {
                  $.notify({
                    message: res.msg
                  }, {
                    delay: 1000,
                    type: 'success',
                    onClose: function () {
                      location.reload()
                    }
                  })
                } else {
                  $.notify({
                    message: res.msg,
                  }, {
                    delay: 1000,
                    type: 'warning'
                  })
                }
              }
            })
          }
        },
        cancel: {
          text: '取消',
          btnClass: 'btn-danger'
        }
      }
    })
  })
  // 批量删除
  $('.dels').click(function () {
    var ids = GetID()
    if (ids.length == 0) {
      $.notify({
        message: '请选择需要删除的预约订单',
      }, {
        type: 'warning'
      })
      return false
    }
    $.confirm({
      title: '批量删除',
      content: '确认批量删除预约订单？',
      buttons: {
        confirm: {
          text: '确认',
          btnClass: 'btn-info',
          action: () => {
            $.ajax({
              type: "post",
              url: `{:url('admin/projectorder/del')}`,
              data: {
                action: 'dels',
                ids
              },
              dataType: "json",
              success: function (res) {
                if (res.code === 1) {
                  $.notify({
                    message: res.msg
                  }, {
                    delay: 1000,
                    type: 'success',
                    onClose: function () {
                      location.reload()
                    }
                  })
                } else {
                  $.notify({
                    message: res.msg,
                  }, {
                    delay: 1000,
                    type: 'warning'
                  })
                }
              }
            })
          }
        },
        cancel: {
          text: '取消',
          btnClass: 'btn-danger'
        }
      }
    })
  })
</script>